<template>
  <div style="width: 100%" class="cc-display">
    <div id="scrollDiv" class="boxScroll so_middle">
      <div
        v-bind:style="{
          width: Math.round(chapterlist.length / 2) * 250 - 50 + 'px'
        }"
      >
        <div
          v-for="(item, index) in chapterlist"
          :key="index"
          v-bind:style="[
            { float: 'left', margin: '0 50px 30px 0' },
            index + 1 == Math.round(chapterlist.length / 2)
              ? { marginRight: '0' }
              : ''
          ]"
          class="border-none classItem"
        >
          <div style="width: 35%; height: 100%; float: left" class="cc-display">
            <span class="font26b">{{ item.chapter }}</span>
          </div>
          <div style="width: 65%; height: 100%; float: left" class="cc-display">
            <span class="font22b">{{ item.chapterName }}</span>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { ScrollCross } from "@/assets/scroll.crossrange.js";

export default {
  name: "ClassBrowse",
  props: {
    chapterlist: Array
  },
  data() {
    return {
      videoChapter: [
        {
          title: "考研英语词汇解析",
          value: "01"
        },
        {
          title: "考研英语词汇解析2",
          value: "02"
        },
        {
          title: "考研英语词汇解析3",
          value: "03"
        },
        {
          title: "考研英语词汇解析4",
          value: "04"
        },
        {
          title: "考研英语词汇解析5",
          value: "05"
        },
        {
          title: "考研英语词汇解析5",
          value: "06"
        },
        {
          title: "考研英语词汇解析5",
          value: "07"
        },
        {
          title: "考研英语词汇解析5",
          value: "08"
        },
        {
          title: "考研英语词汇解析5",
          value: "09"
        },
        {
          title: "考研英语词汇解析5",
          value: "10"
        },
        {
          title: "考研英语词汇解析5",
          value: "11"
        }
      ],
      scrollDiv: ""
    };
  },
  mounted() {
    let sc = new ScrollCross(document.getElementById("scrollDiv"));
    sc.explainText();
  }
};
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped lang="scss">
.classItem {
  width: 200px;
  height: 120px;
  border-radius: 8px;
  border: 1px solid #99a2aa;
}

.boxScroll {
  height: 320px;
  margin-top: 40px;
  padding-top: 40px;
  border-top: 2px solid #eee;
  overflow-x: auto;
}
</style>
